<template>
    <div class="about">
        <div class="bannder">
            <img src="https://img601.yun300.cn/repository/image/b4eb80d3-446d-4fef-865e-d22a130c8317.jpg?tenantId=215997&viewType=1&k=1642041118000"
                alt="">
        </div>
        <div class="top">
            <div class="title">
                不追求独特风格 — 而着眼于恒久的美
            </div>
            <div class="txt">
                整座小区共四幢超高层建筑，采用“前低后高”的建筑布局，形式稳固; 楼宇顶部设计为一品官员的官帽形状，是为汤臣一品案名由来
            </div>
        </div>
        <div class="list">
            <div class="item" v-for="(item,index) in list" :key="index">
                <div class="name">
                    {{ item.name }}
                </div>
                <div class="txt">
                    {{ item.txt }}
                </div>
                <div class="txt">
                    {{ item.txt2 }}
                </div>
                <img :src="item.img" alt="">
            </div>
        </div>
    </div>
</template>
<script>
// @ is an alias to /src

export default {
    name: 'Home',

    data() {
        return {
            list:[
                {
                    name:'外墙',
                    txt:'专利外墙色，擅长与阳光沟通',
                    txt2:'外立面颜色为“琥珀黄”，通过采用特殊材质，令建筑在不同时间的阳光照射下，折射出不同的光彩',
                    img:'http://www.tomson-riviera.com/repository/image/a51c6430-d2b8-4c14-a1d1-15d593ba75d9.jpg'
                },
                {
                    name:'大堂',
                    txt:'全玻璃穹顶入户大堂，回家之前的礼遇',
                    txt2:'独立于主体建筑的入户大堂，拥有世界罕有的全玻璃架构、高12.7米、直径16米的穹顶，只留阳光不留阴影',
                    img:'http://www.tomson-riviera.com/repository/image/3b6fb523-e4dc-482a-acc8-6692f44ff655.jpg'
                },
                {
                    name:'回廊',
                    txt:'艺术回廊，构建内部私密交通线',
                    txt2:'由主体建筑的一层及建筑之间的观景连廊构成的艺术回廊，既保障了内部，交通的私密性，也为整个社区拓展了艺术表现空间及公共休闲空间。',
                    img:'http://www.tomson-riviera.com/repository/image/5b73a3e0-829f-471c-86d2-e917b716bcdd.jpg'
                }
            ]
        }
    }
}
</script>
<style lang="less" scoped>
.bannder {
    width: 100%;
    height: 400px;

    img {
        width: 100%;
        height: 100%;
    }
}
.top{
    margin: 80px auto;
    width: 80%;
    padding-bottom: 60px;
    border-bottom: 1px solid #c3c3c3;
    .title{
        font-size: 30px;
        font-weight: 600;
        margin-bottom: 20px;
    }
    .txt{
        font-size: 20px;
    }
}
.item{margin-top: 20px;
    .name{
        color: #c5a544;
        font-weight: 600;
        font-size: 24px;
        height: 40px;
        line-height: 40px;
    }
    .txt{
        font-size: 20px;
        line-height: 30px;
        height: 30px;
    }
    img{
        margin-top: 30px;
        width: 1000px;
        height: 500px;
    }
}
</style>